CSSボーダー完全ガイド：基本から応用、個性的なWebページ要素を作る

概要

Webページの要素に洗練されたボーダースタイルを追加したいですか？このガイドでは、ボーダーのスタイル、幅、色、角丸、各辺の個別設定、ショートハンドプロパティなど、CSSのborderプロパティについて詳しく解説します。さらに、豊富なコード例も提供し、個性的なWebデザインを簡単に作成できるようにします。

1. CSSボーダーとは？

CSSのボーダーとは、要素のコンテンツとパディングを囲む線のことです。ボーダーは、要素を目立たせたり、他の要素と区別したり、視覚的な階層構造を作成したりするために使用されます。

2. CSSボーダースタイル（`border-style`）

border-styleプロパティは、ボーダーの表示方法を制御します。

値 説明 プレビュー
none ボーダーなし（デフォルト） （ボーダーなし）
hidden ボーダーを非表示にします （ボーダーなし）
dotted 点線でボーダーを描画します

 

点線

 
dashed 破線でボーダーを描画します

 

破線

 
solid 実線でボーダーを描画します

 

実線

 
double 二重線でボーダーを描画します

 

二重線

 
groove 彫刻のように見える3Dボーダーを描画します

 

彫刻（groove）

 
ridge 隆起のように見える3Dボーダーを描画します

 

隆起（ridge）

 
inset 凹んだように見える3Dボーダーを描画します

 

凹み（inset）

 
outset 浮き出たように見える3Dボーダーを描画します

 

浮き出し（outset）

 

使用例:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>アウトラインの用例</title>
  <style>
    p {
      outline-style: dotted; /* 点線でアウトラインを描画 */
    }
  </style>
</head>
<body>
  <p>この段落には点線のアウトラインが適用されています。</p>
</body>
</html>

CSS 邊框

3. CSSボーダー幅（border-width）

border-widthプロパティは、ボーダーの太さを設定します。

  • 長さの値 (px, pt, cm, emなど)

  • キーワード: thin、medium (デフォルト)、thick

  • パーセンテージ: 親要素の幅に対するパーセンテージ

使用例:

p {
  border-width: 2px; /* ボーダーの幅を2pxに設定 */
}

4. CSSボーダー色（border-color）

border-colorプロパティは、ボーダーの色を設定します。

  • カラーネーム (red, blue, green など)

  • RGB値 (rgb(255, 0, 0) など)

  • 16進数 (#ff0000 など)

  • 透明キーワード (transparent)

使用例:

p {
  border-color: red; /* ボーダーの色を赤に設定 */
}

5. 各辺のボーダーを個別に設定する

border-top、border-right、border-bottom、border-leftプロパティを使用して、上下左右のボーダーを個別に設定することができます。

使用例:

p {
  border-top: 1px solid red;    /* 上部のボーダーを赤の実線に設定 */
  border-right: 2px dashed blue; /* 右側のボーダーを青の破線に設定 */
  border-bottom: 3px dotted green; /* 下部のボーダーを緑の点線に設定 */
  border-left: none;            /* 左側のボーダーをなしに設定 */
}

6. CSSボーダーショートハンドプロパティ（border）

borderショートハンドプロパティは、border-width、border-style、border-colorの3つのプロパティを一度に設定することができます。

使用例:

p {
  border: 2px solid red; /* ボーダーを幅2pxの赤の実線に設定 */
}

7. CSS角丸ボーダー (border-radius)

border-radius プロパティは、要素の角を丸くします。

  • 1つの値: 全ての角に同じ半径を適用

  • 2つの値: 最初の値は左上と右下の角に、2番目の値は右上と左下の角に適用

  • 3つの値: 最初の値は左上に、2番目の値は右上と左下に、3番目の値は右下に適用

  • 4つの値: 左上、右上、右下、左下の順に適用

使用例:

p {
  border-radius: 10px; /* 全ての角を半径10pxで丸くする */
}

8. まとめ

CSSのボーダープロパティは、Webページに視覚的な魅力を加えるための強力なツールです。この記事で紹介したテクニックを習得すれば、Webデザインの幅が広がります。

9. よくある質問

9.1 border-style で hidden を指定する意味は何ですか？

hidden は、表のセル間のボーダーを非表示にする場合などに使用します。

9.2 border-width でパーセンテージを指定した場合、何に対するパーセンテージですか？

親要素の幅に対するパーセンテージです。

9.3 border-radius で角を丸くしすぎると、テキストがはみ出すことがあります。どのように対処すればよいですか？

padding プロパティで内側の余白を調整することで、テキストのはみ出しを防ぐことができます。